<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建任务管理</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="任务管理">
                            <div class="">
                                <div class="t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money1">
                                            <el-checkbox label="1">完善信息</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money1">
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                                <div class="mar_t10 t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money2">
                                            <el-checkbox label="1">绑定手机号</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money2">
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                                <div class="mar_t10 t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money2">
                                            <el-checkbox label="1">收藏小程序</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money2">
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                                <div class="mar_t10 t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money3">
                                            <el-checkbox label="1">购买商品</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money3">
                                        <span class="mar_lr10">每消费</span>
                                        <el-input-number v-model="integral" controls-position="right" :min="1" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">元</span>
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="integral" controls-position="right" :min="1" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                                <div class="mar_t10 t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money3">
                                            <el-checkbox label="1">订单评价</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money3">
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                                <div class="mar_t10 t_l numberInput">
                                    <div class="mar_lr10">
                                        <el-checkbox-group v-model="money3">
                                            <el-checkbox label="1">每日签到</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                    <div v-show="money3">
                                        <span class="mar_lr10">获得</span>
                                        <el-input-number v-model="giveMoney" controls-position="right" :min="0.01" :max="99999999"
                                                         class=""></el-input-number>
                                        <span class="mar_lr10">成长值</span>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
<!--                        <el-form-item label="活动背景">-->
<!--                            <div class="uploadSource bor_de rel flex" v-if="form.icon">-->
<!--                                <label class="statusLabel curs" @mouseenter="enter(1)" @mouseleave="leave(1)">-->
<!--                                    <i class="el-icon-check" ref="imgicon1"></i>-->
<!--                                    <i class="el-icon-close" @click="deleteMultiImage(form.icon,1)"></i>-->
<!--                                </label>-->
<!--                                <img :src="form.icon" @click='test(1)' class="wid"/>-->
<!--                            </div>-->
<!--                            <div class="uploadSource flex-center curs" v-else @click='test(1)'>-->
<!--                                <i class="el-icon-plus fon_40 color_d9"></i>-->
<!--                            </div>-->
<!--                            <div class="yb_margin">建议尺寸：720*180</div>-->
<!--                        </el-form-item>-->
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是门店新客专享？" name="1">
                            <div>针对门店新用户进行的专享活动，用户在下单时可叠加使用券、满减活动、门店新客立减。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要做门店新客立减？" name="2">
                            <div>提高新客转化：设置门店新客立减后，可提升新用户下单转化率</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以享受门店新客立减" name="3">
                            <div>首次在门店下单的用户将作为门店新用户享受该优惠</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
        <attachment-img ref="img1" type="img" @attachment='imgadd1'></attachment-img>
    </div>
</template>
<script>
    import {saveNewReduction,getsaveNewReduction} from "@/api/plug";
    import {changeDate} from "@/utils/index";
    import attachmentImg from "@/plugins/attachment-img";


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        components: {attachmentImg,},
        data() {
            return {
                form: {
                    name: '',
                    money: '',
                    useType: '1',
                },
                money1:'',
                money2:'',
                money3:'',
                money4:'',
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',
            }
        },
        methods: {
            async edit(){
                const {data} = await getsaveNewReduction({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
            },
            enter(i=0){
                this.$refs['imgicon' + i].style.display = 'none'
            },
            leave(i=0){
                this.$refs['imgicon' + i].style.display = 'inline-block'
            },
            test(i = 0) {
                console.log(this.$refs, i)
                this.$refs['img' + i].dialogVisible = true
            },
            imgadd1(url) {
                this.form.icon = url.str
            },
            deleteMultiImage(item, index, type) {
                //typem没传是单图multigraph多图；index上传图片组件排序
                Array.prototype.remove = function (val) {
                    var index = this.indexOf(val);
                    if (index > -1) {
                        this.splice(index, 1);
                    }
                };
                if (type == 'multigraph') {
                    switch (index) {
                        case 2:
                            this.form2.environment.remove(item);
                            break
                    }
                } else {
                    switch (index) {
                        case 1:
                            this.form.icon = '';
                            break
                    }
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        const {msg} = await saveNewReduction(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
